<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>填写订单信息</title>
		<link rel="shortcut icon" href="img/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="css/shoppingcar.css" />
		<link rel="stylesheet" type="text/css" href="css/modal.css" />
		<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<style type="text/css">
			/* 头像 */
			.thumFace{
				width: 28px;
			    height: 28px;
			    border-radius: 14px;
			    vertical-align: -8px;
			    margin-right: 15px;
			}
		</style>
	</head>

	<body>
		<div class="site-header site-mini-header">
			<div class="container">
				<div class="header-logo">
					<a class="logo ir" href="index.jsp" title="小米官网">
						::before 小米官网 ::after
					</a>
				</div>
				<div class="header-title" id="J_miniHeaderTitle">
					<h2>确认订单</h2>
				</div>
				<div class="topbar-info" id="J_userInfo">
				<%
					String strId = (String)session.getAttribute("sid");
					String loginImg = (String)session.getAttribute("simg");
					if(strId != null && strId.length() >0){
						// 用户已登录
						if (loginImg != null && loginImg.length() > 0) {
					 		String user = session.getAttribute("simg").toString();
					 		out.print("<img class = 'thumFace' src='"+loginImg+"'>");
					 	}else{
					 		out.print("<img class = 'thumFace' src='img/head_portrait.png'>");
					 	}
					}
				%>
				<%
					String loginName = (String) session.getAttribute("sname");
					String loginTel = (String) session.getAttribute("stel");
					if (loginName != null) {
						// 用户已登录
						String user = session.getAttribute("sname").toString();
						out.print("<a href = 'userinfo.jsp' id = 'userInfo'>" + user + "<a/>");
					} else if (loginTel != null) {
						// 用户已登录
						String user = session.getAttribute("stel").toString();
						out.print("<a href = 'userinfo.jsp' id = 'userInfo'>" + user + "<a/>");
					} 
				%>					
					
				</div>
			</div>
		</div>
		<div class="page-main">
			<div class="container">

				<div class="checkout-box">
					<div class="section section-address">
						<div class="section-header clearfix">
							<h3 class="title"> 收货地址</h3>
						</div>
						<div class="section-body clearfix">
							<div class="address-item address-item-new">
								<i id = "showModel" class="iconfont">&#xe609;</i> 添加新地址
							</div>
						</div>
					</div>
					<!--模态框  -->
						<div id="modal" class="modal">
							<div class="modal-content">
								<header class="modal-header">
									<h4>添加收货地址</h4>
									<span class="close">×</span>
								</header>
								<div class="modal-body">
									<form action="" method="post">
									
									 <div class="text">
										请选择省份：<input type="text" name="customer_name" id="customer_name" placeholder="请输入用户名"
											style = "display:inline-block;margin-left:40px; height: 30px; width: 325px;" />
									</div>
									<div class="text">
										请选择省份：<input type="text" name="customer_tel" id="customer_tel" placeholder="请输入手机号"
										style = "display:inline-block;margin: 20px 0 20px 12px; height: 30px; width: 325px;"/>
									</div>
									<div class="text">
										请填写详细地址：<input type="text" name="customer_email" id="customer_email" placeholder="请输入邮箱"
										style = "display:inline-block;margin-left:40px;  height: 30px; width: 325px;"/>
									</div>
											
									</form>
								</div>
								<footer class="modal-footer">
									<button id="cancel">取消</button>
									<button id="sure">确定</button>
								</footer>
							</div>
						</div>
					<div>
						
					</div>
					<div class="section section-goods">
						<div class="section-header clearfix">
							<h3 class="title">商品及优惠券</h3>
						</div>
						<div class="section-body">
							<ul class="goods-list" id="J_goodsList">
								<li class="clearfix">
									<div class="col col-img">
										<img src="img/shoppingcar/商品图.jpg" width="30" height="30">
									</div>
									<div class="col col-name">

										<a href="pay.jsp" target="_blank">
											小米8 </a>
									</div>

									<div class="col col-price">
										2599元 x 1 </div>
									<div class="col col-status">
										&nbsp;
									</div>
									<div class="col col-total">
										2599元
									</div>

								</li>
								<li class="clearfix">
									<div class="col col-img">
										<img src="img/shoppingcar/商品图1.jpg" width="30" height="30" />
									</div>
									<div class="col col-name">

										<a href="#" target="_blank">
											米粉卡日租卡<em class="label">赠品</em> </a>
									</div>

									<div class="col col-price">
										0元 x 1
									</div>
									<div class="col col-status">
										&nbsp;
									</div>
									<div class="col col-total">
										0元
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="section section-options section-shipment clearfix">
						<div class="section-header">
							<h3 class="title">配送方式</h3>
						</div>
						<div class="section-body clearfix">
							<ul class="clearfix J_optionList options ">
								<li data-type="shipment" class="J_option selected" data-amount="0" data-value="2">
									包邮
								</li>
							</ul>
						</div>
					</div>
					<div class="section section-options section-invoice clearfix">
						<div class="section-header">
							<h3 class="title">发票</h3>
						</div>
						<div class="section-body clearfix">
							<div class="invoice-result">
								<span id="J_invoiceDesc">电子发票</span>
								<span id="J_invoiceTitle">个人</span>
								<span>商品明细</span>
								<a href="#添加一个修改的动作">修改 &gt;</a>
							</div>
						</div>
					</div>
					<div class="section section-count clearfix">
						<div class="money-box" id="J_moneyBox">
							<ul>
								<li class="clearfix">
									<label>商品件数：</label>
									<span class="val">2件</span>
								</li>
								<li class="clearfix">
									<label>商品总价：</label>
									<span class="val">2599元</span>
								</li>
								<li class="clearfix">
									<label>活动优惠：</label>
									<span class="val">-0元</span>
								</li>
								<li class="clearfix">
									<label>优惠券抵扣：</label>
									<span class="val"><i id="J_couponVal">-0</i>元</span>
								</li>
								<li class="clearfix">
									<label>运费：</label>
									<span class="val"><i data-id="J_postageVal">0</i>元</span>
								</li>
								<li class="clearfix total-price">
									<label>应付总额：</label>
									<span class="val"><em data-id="J_totalPrice"><%= session.getAttribute("total")%></em>元</span>
								</li>
							</ul>
						</div>
					</div>
					<div class="section-bar clearfix">
						<div class="fl">
							<div class="seleced-address hide" id="J_confirmAddress">
							</div>
							<div class="big-pro-tip hide J_confirmBigProTip"></div>
						</div>
						<div class="fr">
							<a class="btn " id="J_checkoutToPay">
								去结算
							</a>
						</div>
					</div>
				</div>

			</div>

		</div>
	<script>
		var btn = document.getElementById('showModel');
		var close = document.getElementsByClassName('close')[0];
		var cancel = document.getElementById('cancel');
		var modal = document.getElementById('modal');
		btn.addEventListener('click', function() {
			modal.style.display = "block";
		});
		close.addEventListener('click', function() {
			modal.style.display = "none";
		});
		cancel.addEventListener('click', function() {
			modal.style.display = "none";
		});
	</script>
	
	<script>
		$("#J_checkoutToPay").click(function(){
			$.ajax({
				type:"post",
				url:"AddOrdersAction",
				async:false,//同步：意思是当有返回值以后才会进行后面的js程序。
				success:function(result){
					alert(result);
					window.location.href = "conect_pay_page.jsp";
				},
				error:function(result){
					alert("订单提交失败！");
				}
			});
		});
	</script>
	
	
	</body>

</html>